<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 进度条</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="form-group">
        <label for="total">库存上限</label>
        <input type="text" class="form-control" id="total" placeholder="所需总数">
        <label for="few">补货触发库存数</label>
        <input type="text" class="form-control" id="few" placeholder="补货触发库存数">
    </div>

    <div class="col-xs-12 col-sm-12">
        <div class="progress">
            <div id="process_bar" class="progress-bar" role="progressbar" aria-valuenow="60"
                 aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                <span id="process-toast" class="sr-only">40% 完成</span>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6">
        <button id="inc_btn" class="btn btn-primary" data-loading-text="Loading..."
                type="button"> 增加1库存
        </button>
    </div>
    <div class="col-xs-6 col-sm-6">
        <button id="dec_btn" class="btn btn-primary" data-loading-text="Loading..."
                type="button"> 减少1库存
        </button>

    </div>
</div>


</body>

<script>
    let _defaultMax = 100
    let _defaultGet = 20
    let _now = 40

    let getMax = function $getMax() {
        let __max = $("#total").value
        if (isNaN(__max)){
            __max = _defaultMax
            $("total").val(__max)
        }
        return __max
    }
    let getGet = function (){
        let __few = $("#few").value
        if (isNaN(__few)){
            __few = _defaultGet
            $("few").val(__few)
        }
        return __few
    }
    let setWidth = function (width){

    }

    $(function () {
        $("#inc_btn").click(function () {
            $(function () {
                let _max = getMax()
                if (_now > _max){
                    alert("已到达上限")
                    return
                }
                _now += 1


                console.log(_max)
                let _width = _now/_max
                let preStr = _width*100 + "%"
                console.log(preStr)
                $("#process_bar").css("width",preStr)
                // $(this).button('reset');
                // $(this).dequeue();
            });
        });
    });
    $(function () {
        $("#dec_btn").click(function () {
            $(function () {
                let _few = getGet()
                if (_now-1 < _few){
                    alert("已到达补货数量，自动补货到满")
                    _now = getMax()
                    console.log(_now)
                    let _width = _now/_now
                    let preStr = _width*100 + "%"
                    console.log(preStr)
                    $("#process_bar").css("width",preStr)
                    return
                }
                _now -= 1

                let _max = $("#total").value
                if (isNaN(_max)){
                    _max = _defaultMax
                    $("total").val(_max)
                }
                console.log(_max)
                let _width = _now/_max
                let preStr = _width*100 + "%"
                console.log(preStr)
                $("#process_bar").css("width",preStr)
                // $(this).button('reset');
                // $(this).dequeue();
            });
        });
    });
</script>

</html>